<div class="nav-tabs-custom tab-success one-min-height">
  <div class="tab-content">
    <div class="tab-pane active" id="tab_1">

      <div class="row">
        <div class="col-sm-8 col-sm-push-2 box-solid">
          <form class="form form-horizontal" [formGroup]="instancesForm">
            <div class="one-form-body">
              <div class="form-group">
                <label for="instance_update_instanceName" class="col-sm-4 control-label">实例名称:</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" placeholder="实例名称" id="instance_update_instanceName"
                         required formControlName="alarmName">
                  <div *ngIf="formErrors.alarmName" class="has-error">
                    <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.alarmName}} </label>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label for="instance_update_code" class="col-sm-4 control-label">实例编码:</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" placeholder="实例编码" id="instance_update_code"
                         required formControlName="code">
                  <div *ngIf="formErrors.code" class="has-error">
                    <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.code}} </label>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label for="instance_update_type" class="col-sm-4 control-label">报警类型:</label>
                <div class="col-sm-8">
                  <select class="multiselect form-control" id="instance_update_type" formControlName="type"
                          style="max-width: 100%;">
                    <option value="1">标准站</option>
                    <option value="2">微型站</option>
                    <option value="3">工业废气</option>
                    <option value="4">扬尘</option>
                    <option value="5">油烟</option>
                    <option value="6">油漆房</option>
                    <option value="7">加油站</option>
                    <option value="8">工业废水</option>
                    <option value="9">水质断层</option>
                  </select>
                </div>
              </div>

              <div class="form-group">
                <label for="instance_update_receiverName" class="col-sm-4 control-label">发送对象:</label>
                <div class="col-sm-8">
                  <input type="hidden" class="form-control" id="instance_update_receiver"
                         formControlName="receiver">
                  <input type="text" class="form-control" placeholder="发送对象" id="instance_update_receiverName"
                         formControlName="receiverName" (dblclick)="getReceiver()" readonly>
                  <div *ngIf="formErrors.receiverName" class="has-error">
                    <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.receiverName}}
                    </label>
                  </div>
                </div>
              </div>

              <div class="row">
                <label class="col-sm-4 control-label">报警等级:</label>
                <div class="col-sm-8">
                  <div class="row">
                    <div class="col-xs-3">
                      <input type="radio" id="instance_update_level_blue" value="1" checked
                             formControlName="level">
                      <label for="instance_update_level_blue">
                        蓝色
                      </label>
                    </div>
                    <div class="col-xs-3">
                      <input type="radio" id="instance_update_level_yellow" value="2" formControlName="level">
                      <label for="instance_update_level_yellow">
                        黄色
                      </label>
                    </div>
                    <div class="col-xs-3">
                      <input type="radio" id="instance_update_level_orange" value="3" formControlName="level">
                      <label for="instance_update_level_orange">
                        橙色
                      </label>
                    </div>
                    <div class="col-xs-3">
                      <input type="radio" id="instance_update_level_red" value="4" formControlName="level">
                      <label for="instance_update_level_red">
                        红色
                      </label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <label class="col-sm-4 control-label">发送方式:</label>
                <div class="col-sm-8">
                  <div class="row">
                    <div class="col-xs-4">
                      <input type="radio" id="instance_update_sendMode_inApp" value="1" checked
                             formControlName="sendMode">
                      <label for="instance_update_sendMode_inApp">
                        应用内
                      </label>
                    </div>
                    <div class="col-xs-4">
                      <input type="radio" id="instance_update_sendMode_SMS" value="2"
                             formControlName="sendMode">
                      <label for="instance_update_sendMode_SMS">
                        短信
                      </label>
                    </div>
                    <div class="col-xs-4">
                      <input type="radio" id="instance_update_sendMode_email" value="3"
                             formControlName="sendMode">
                      <label for="instance_update_sendMode_email">
                        邮件
                      </label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <label class="col-sm-4 control-label">实时发送:</label>
                <div class="col-sm-8">
                  <div class="row">
                    <div class="col-xs-4">
                      <input type="radio" id="instance_update_isReal_yes" value="1" checked
                             formControlName="isReal" (click)="yesClickFun($event)">
                      <label for="instance_update_isReal_yes">
                        是
                      </label>
                    </div>
                    <div class="col-xs-4">
                      <input type="radio" id="instance_update_isReal_no" value="0" formControlName="isReal"
                             (click)="noClickFun($event)">
                      <label for="instance_update_isReal_no">
                        否
                      </label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="form-group" id="instance_update_startTime_div" style="display: none;">
                <label for="instance_update_startTime" class="col-sm-4 control-label">开始时间:</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" placeholder="开始时间" id="instance_update_startTime"
                         formControlName="startTime">
                </div>
              </div>

              <div class="form-group" id="instance_update_endTime_div" style="display: none;">
                <label for="instance_update_endTime" class="col-sm-4 control-label">结束时间:</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" placeholder="结束时间" id="instance_update_endTime"
                         formControlName="endTime">
                </div>
              </div>

              <div class="row">
                <label class="col-sm-4 control-label">是否有效:</label>
                <div class="col-sm-8">
                  <div class="row">
                    <div class="col-xs-4">
                      <input type="radio" id="instance_update_Use" value="1" formControlName="isUse">
                      <label for="instance_update_Use">
                        有效
                      </label>
                    </div>
                    <div class="col-xs-4">
                      <input type="radio" id="instance_update_inUse" value="0" checked
                             formControlName="isUse">
                      <label for="instance_update_inUse">
                        无效
                      </label>
                    </div>
                  </div>
                </div>
              </div>


              <div class="form-group">
                <label for="content" class="col-sm-4 control-label">报警模板内容:</label>
                <div class="col-sm-8">
                  <textarea id="content" rows="5" formControlName="content"></textarea>
                  <div *ngIf="formErrors.content" class="has-error">
                    <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.content}} </label>
                  </div>
                </div>
              </div>

              <div class="form-group" formArrayName="ruleList" style="padding: 0 15px">
                <div class="row">
                  <h4 class="col-sm-4 control-label">添加规则:</h4>
                </div>
                <div *ngFor="let alarmRule of ruleList.controls; let i=index" [formGroupName]="i">
                  <!-- The repeated updateress template -->
                  <div style="margin-left: 1em;">
                    <div class="form-group col-xs-12">
                      <label class="col-sm-4 control-label" [for]="'orderNumber'+i">执行序号:</label>
                      <div class="col-sm-8">
                        <input class="form-control" [id]="'orderNumber'+i" formControlName="orderNumber"/>
                        <div *ngIf="formErrors.orderNumber" class="has-error">
                          <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.orderNumber}}
                          </label>
                        </div>
                      </div>
                    </div>
                    <div class="form-group col-xs-12">
                      <label class="col-sm-4 control-label" [for]="'rule'+i">规则名称:</label>
                      <div class="col-sm-8">
                        <select class="multiselect form-control" [id]="'rule'+i" (change)="pushRule(i,rule.value)" #rule
                                formControlName="ruleName" style="max-width: 100%;">
                          <option value=""> -------请选择规则------</option>
                          <option *ngFor="let ruleName of getRuleNames()" [value]="ruleName">
                            {{ruleName}}
                          </option>
                        </select>
                        <div *ngIf="formErrors.ruleName" class="has-error">
                          <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.ruleName}}
                          </label>
                        </div>
                      </div>
                    </div>

                    <div class="form-group col-xs-12">
                      <label class="col-sm-4 control-label" [for]="'ruleOperation'+i">操作:</label>
                      <div class="col-sm-8">
                        <select class="multiselect form-control" [id]="'ruleOperation'+i"
                                formControlName="ruleOperation" style="max-width: 100%;">
                          <option value=""></option>
                          <option *ngFor="let oper of getRuleOpers(i)" [value]="oper">
                            {{oper}}
                          </option>
                        </select>
                        <div *ngIf="formErrors.ruleOperation" class="has-error">
                          <label class="col-sm-4 control-label" class="control-label"><i
                            class="fa fa-times-circle-o"></i>{{formErrors.ruleOperation}} </label>
                        </div>
                      </div>
                    </div>
                    <div class="form-group col-xs-12">
                      <label class="col-sm-4 control-label" [for]="'ruleValue'+i">比较值:</label>
                      <div class="col-sm-8">
                        <select class="multiselect form-control" [id]="'ruleValue'+i" formControlName="ruleValue"
                                style="max-width: 100%;">
                          <option value=""></option>
                          <option *ngFor="let val of getRuleVals(i)" [value]="val">
                            {{val}}
                          </option>
                        </select>
                        <div *ngIf="formErrors.ruleValue" class="has-error">
                          <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.ruleValue}}
                          </label>
                        </div>
                      </div>
                    </div>
                    <div class="form-group col-xs-12">
                      <label class="col-sm-4 control-label" [for]="'successNext'+i">成功后执行:</label>
                      <div class="col-sm-8">
                        <input class="form-control" [id]="'successNext'+i" formControlName="successNext">
                        <div *ngIf="formErrors.successNext" class="has-error">
                          <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.successNext}}
                          </label>
                        </div>
                      </div>
                    </div>
                    <div class="form-group col-xs-12">
                      <label class="col-sm-4 control-label" [for]="'failNext'+i">失败后执行:</label>
                      <div class="col-sm-8">
                        <input class="form-control" [id]="'failNext'+i" formControlName="failNext">
                        <div *ngIf="formErrors.failNext" class="has-error">
                          <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.failNext}}
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-4 control-label">
                      <button class="btn btn-success" (click)="remove(i)" style="margin-bottom: 10px;">删除规则</button>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-4 control-label">
                    <button class="btn btn-success" (click)="addAlarmRule()" type="button">添加规则</button>
                  </div>
                </div>

              </div>

            </div>
            <div class="one-form-footer">
              <div class="pull-right">
                <button class="btn btn-default" type="reset" (click)="cancelInstanceUpdate()">取消</button>
                <button class="btn btn-success" type="button" [disabled]="instancesForm.invalid || submitted" (click)="onSubmit()">
                  提交
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

    </div>
    <div class="tab-pane" id="tab_2">
      <div class="row">
        <div class="col-sm-8 col-sm-push-2">
          <form class="form form-horizontal" [formGroup]="instancesGroupForm">

            <div class="form-group">
              <label for="instance_update_group_instanceName" class="col-sm-4 control-label">实例名称:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="实例名称" id="instance_update_group_instanceName"
                       required formControlName="alarmName">
                <div *ngIf="groupFormErrors.alarmName" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{groupFormErrors.alarmName}}
                  </label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="instance_update_group_code" class="col-sm-4 control-label">实例编码:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="实例编码" id="instance_update_group_code"
                       required formControlName="code">
                <div *ngIf="groupFormErrors.code" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{groupFormErrors.code}} </label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="instance_update_group_type" class="col-sm-4 control-label">报警类型:</label>
              <div class="col-sm-8">
                <select class="multiselect form-control" id="instance_update_group_type" formControlName="type"
                        style="max-width: 100%;">
                  <option value="1">标准站</option>
                  <option value="2">微型站</option>
                  <option value="3">工业废气</option>
                  <option value="4">扬尘</option>
                  <option value="5">油烟</option>
                  <option value="6">油漆房</option>
                  <option value="7">加油站</option>
                  <option value="8">工业废水</option>
                  <option value="9">水质断层</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label for="instance_update_group_receiverName" class="col-sm-4 control-label">发送对象:</label>
              <div class="col-sm-8">
                <input type="hidden" class="form-control" id="instance_update_group_receiver"
                       formControlName="receiver">
                <input type="text" class="form-control" placeholder="发送对象" id="instance_update_group_receiverName"
                       formControlName="receiverName" (dblclick)="getGroupReceiver()">
                <div *ngIf="groupFormErrors.receiverName" class="has-error">
                  <label class="control-label"><i class="fa fa-times-circle-o"></i>{{formErrors.receiverName}} </label>
                </div>
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 control-label">报警等级:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-3">
                    <input type="radio" id="instance_update_group_level_blue" value="1" checked
                           formControlName="level">
                    <label for="instance_update_group_level_blue">
                      蓝色
                    </label>
                  </div>
                  <div class="col-xs-3">
                    <input type="radio" id="instance_update_group_level_yellow" value="2" formControlName="level">
                    <label for="instance_update_group_level_yellow">
                      黄色
                    </label>
                  </div>
                  <div class="col-xs-3">
                    <input type="radio" id="instance_update_group_level_orange" value="3" formControlName="level">
                    <label for="instance_update_level_orange">
                      橙色
                    </label>
                  </div>
                  <div class="col-xs-3">
                    <input type="radio" id="instance_update_group_level_red" value="4" formControlName="level">
                    <label for="instance_update_group_level_red">
                      红色
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 control-label">发送方式:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-4">
                    <input type="radio" id="instance_update_group_sendMode_inApp" value="1" checked
                           formControlName="sendMode">
                    <label for="instance_update_group_sendMode_inApp">
                      应用内
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_update_group_sendMode_SMS" value="2"
                           formControlName="sendMode">
                    <label for="instance_update_group_sendMode_SMS">
                      短信
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_update_group_sendMode_email" value="3"
                           formControlName="sendMode">
                    <label for="instance_update_group_sendMode_email">
                      邮件
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 control-label">实时发送:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-4">
                    <input type="radio" id="instance_update_group_isReal_yes" value="1" checked
                           formControlName="isReal" (click)="yesGroupClickFun($event)">
                    <label for="instance_update_group_isReal_yes">
                      是
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_update_group_isReal_no" value="0" formControlName="isReal"
                           (click)="noGroupClickFun($event)">
                    <label for="instance_update_group_isReal_no">
                      否
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group" id="instance_update_group_startTime_div" style="display: none;">
              <label for="instance_update_group_startTime" class="col-sm-4 control-label">开始时间:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="开始时间" id="instance_update_group_startTime"
                       formControlName="startTime">
              </div>
            </div>

            <div class="form-group" id="instance_update_group_endTime_div" style="display: none;">
              <label for="instance_update_group_endTime" class="col-sm-4 control-label">结束时间:</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="结束时间" id="instance_update_group_endTime"
                       formControlName="endTime">
              </div>
            </div>

            <div class="row">
              <label class="col-sm-4 control-label">是否有效:</label>
              <div class="col-sm-8">
                <div class="row">
                  <div class="col-xs-4">
                    <input type="radio" id="instance_update_group_Use" value="1" formControlName="isUse">
                    <label for="instance_update_group_Use">
                      有效
                    </label>
                  </div>
                  <div class="col-xs-4">
                    <input type="radio" id="instance_update_group_inUse" value="0" checked
                           formControlName="isUse">
                    <label for="instance_update_group_inUse">
                      无效
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <!--搜索栏-->
            <form class="form-inline">
              <div class="form-group" style="margin-right:10px;">
                <label for="instanceGroupName">实例名称：</label>
                <input type="text" class="form-control" id="instanceGroupName" placeholder="" value=""
                       (keyup.enter)="search()">
              </div>
              <div class="form-group" style="margin-right:10px;">
                <label for="instanceGroupCode">实例编码：</label>
                <input type="text" class="form-control" id="instanceGroupCode" placeholder="" value=""
                       (keyup.enter)="search()">
              </div>
              <button class="btn btn-success" type="button" (click)="search()">查询</button>
            </form>
            <!-- table栏 -->
            <div class="one-table-area">
              <table id="one_table_instances"></table>
            </div>
          </form>
          <div class="one-form-footer">
            <div class="pull-right">
              <button class="btn btn-default" type="button" (click)="cancelInstanceUpdate()">取消</button>
              <button class="btn btn-success" type="button" [disabled]="instancesGroupForm.invalid || groupSubmitted"
                      (click)="onGroupSubmit()">
                提交
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
